<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./js/jquery.min.js"></script>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <title>个人主页</title>
    <style type="text/css">
        /*   * {
            box-sizing: border-box;
        } */

        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.42857143;
            color: #333;
            background-color: #fff;
        }

        div {
            display: block;
        }

        .col-md-4,
        .col-md-8 {
            position: relative;
            min-height: 1px;
            padding-right: 15px;
            padding-left: 15px;
        }

        .banner-info {
            background-image: url(./img/personbg.jpg);
            width: 100%;
            height: 513px;
            background-size: cover;
            background-repeat: no-repeat;
            padding: 4em 0;
        }

        .header-left>img{
            height: 100%;
            width: 100%;
            background-color: #fff;
            /* padding: 0 15px; */
            /* background-color: #333333; */
        }

        .ava {
            width: 100%;
            /* height: 98%; */
        }

        .header-right {
            padding-left: 3em;
            /* background-color: #333333; */
            color: white;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            margin: 0;
            font-family: 'Overlock', cursive;
        }

        .header-right h2 {
            font-size: 1.2em;
            color: #000;
            background: #F3E000;
            display: inline-block;
            padding: .5em 1.5em;
            position: relative;
        }


        ul,
        label {
            margin: 0;
            padding: 0;
        }

        ul ul {
            list-style-type: circle;
            margin-block-start: 0px;
            margin-block-end: 0px;
        }

        ul {
            /* display:inline-block; */
            list-style-type: none;
            margin-block-start: 1em;
            margin-block-end: 1em;
            padding-inline-start: 40px;
        }

        li {
            list-style: none;
            /* display: inline-block; */
            font-size: 16px;
        }

        ul>li>ul>li {
            display: inline-block;
            margin-top: 16px;
            margin-left: 30px;
        }
    </style>
</head>

<body>
    <div class="banner-info">
        <div class="container"">
            <div class=" row">
            <div class="col-4 header-left">
                <img class="ava" id="ava" src="./imgStoreHouse/avatar/user1.jpg" alt="该用户暂未上传头像">
            </div>
            <div class="col-8 header-right">
                <h2>Hello</h2>
                <h1 id="user_name">My name is Fanbingbing</h1>
                <h6>平面设计师和网站建设人员</h6>
                <ul class="address">
                    <li>
                        <ul class="address-text">
                            <li><b>昵称&ensp;&ensp;&ensp; </b></li>
                            <li id="uname">XXX</li>
                        </ul>
                    </li>
                    <li>

                        <ul class="address-text">
                            <li><b>性别&ensp;&ensp;&ensp; </b></li>
                            <li id="gender">XXX</li>
                        </ul>
                    </li>
                    <li>
                        <ul class="address-text">
                            <li><b>写真照&ensp;&ensp; </b></li>
                            <li id="picture">XXX</li>
                        </ul>
                    </li>
                    <li>
                        <ul class="address-text">
                            <li><b>联系电话 </b></li>
                            <li id="phone">XXX</li>
                        </ul>
                    </li>

                    <li>
                        <ul class="address-text">
                            <li><b>个人邮箱 </b></li>
                            <li id="email"> XXX</a></li>
                        </ul>
                    </li>
                    <li>
                        <ul class="address-text">
                            <li><b>用户编号</b></li>
                            <li id="uid">有兴趣请点击预览个人淘宝店铺→</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    </div>
</body>
<script src="./js/userintr.js"></script>

</html>